﻿@page "/menu-bar/toolbar-integration"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.SplitButtons

@inherits SampleBaseComponent

<SampleDescription>
    <p> This sample demonstrates the real use case of Menu component in blazor application. </p>
</SampleDescription>
<ActionDescription>
   <p>The <code>Menu</code> utilizes the <b>Items</b> property to represent the Menu in web application. The Toolbar component is used in this sample to make stylish menu bars.</p>
   <p> More information about Blazor Menu component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/menu-bar/getting-started/"> documentation section </a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="toolbar-menu-control">
        <SfToolbar>
            <ToolbarItems>
                <ToolbarItem>
                    <Template>
                        <div>
                            <SfMenu CssClass="e-custom-menu" TValue="MenuItem">
                                <MenuItems>
                                    <MenuItem Text="Appliances">
                                        <MenuItems>
                                            <MenuItem Text="Kitchen">
                                                <MenuItems>
                                                    <MenuItem Text="Electric Cookers"></MenuItem>
                                                    <MenuItem Text="Coffee Makers"></MenuItem>
                                                    <MenuItem Text="Blenders"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                            <MenuItem Text="Washing Machine">
                                                <MenuItems>
                                                    <MenuItem Text="Fully Automatic"></MenuItem>
                                                    <MenuItem Text="Semi Automatic"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                            <MenuItem Text="Refrigerators">
                                                <MenuItems>
                                                    <MenuItem Text="Inverter ACs"></MenuItem>
                                                    <MenuItem Text="Split ACs"></MenuItem>
                                                    <MenuItem Text="Window ACs"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                        </MenuItems>
                                    </MenuItem>
                                    <MenuItem Text="Accessories">
                                        <MenuItems>
                                            <MenuItem Text="Mobile">
                                                <MenuItems>
                                                    <MenuItem Text="Headphones"></MenuItem>
                                                    <MenuItem Text="Memory Cards"></MenuItem>
                                                    <MenuItem Text="Power Banks"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                            <MenuItem Text="Computer">
                                                <MenuItems>
                                                    <MenuItem Text="Pendrives"></MenuItem>
                                                    <MenuItem Text="External Hard Disks"></MenuItem>
                                                    <MenuItem Text="Monitors"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                        </MenuItems>
                                    </MenuItem>
                                    <MenuItem Text="Fashion">
                                        <MenuItems>
                                            <MenuItem Text="Men">
                                                <MenuItems>
                                                    <MenuItem Text="Shirts"></MenuItem>
                                                    <MenuItem Text="Jackets"></MenuItem>
                                                    <MenuItem Text="Track Suits"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                            <MenuItem Text="Women">
                                                <MenuItems>
                                                    <MenuItem Text="Kurtas"></MenuItem>
                                                    <MenuItem Text="Salwars"></MenuItem>
                                                    <MenuItem Text="Sarees"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                        </MenuItems>
                                    </MenuItem>
                                    <MenuItem Text="Home & Living">
                                        <MenuItems>
                                            <MenuItem Text="Furniture">
                                                <MenuItems>
                                                    <MenuItem Text="Beds"></MenuItem>
                                                    <MenuItem Text="Mattresses"></MenuItem>
                                                    <MenuItem Text="Dining Tables"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                            <MenuItem Text="Decor">
                                                <MenuItems>
                                                    <MenuItem Text="Clocks"></MenuItem>
                                                    <MenuItem Text="Wall Decals"></MenuItem>
                                                    <MenuItem Text="Paintings"></MenuItem>
                                                </MenuItems>
                                            </MenuItem>
                                        </MenuItems>
                                    </MenuItem>
                                </MenuItems>
                            </SfMenu>
                        </div>
                    </Template>
                </ToolbarItem>
                <ToolbarItem Align="ItemAlign.Right" Type="ItemType.Input">
                    <Template>
                        <div id="searchArea" class="e-input-group"><input class="e-input" type="text" placeholder="Search" /><span class="e-input-group-icon em-icons e-search"></span></div>
                    </Template>
                </ToolbarItem>
                <ToolbarItem Align="ItemAlign.Right">
                    <Template>
                        <div>
                            <SfDropDownButton Content="Andrew">
                                <DropDownMenuItems>
                                    <DropDownMenuItem Text="My Profile"></DropDownMenuItem>
                                    <DropDownMenuItem Text="Orders"></DropDownMenuItem>
                                    <DropDownMenuItem Text="Rewards"></DropDownMenuItem>
                                    <DropDownMenuItem Text="Logout"></DropDownMenuItem>
                                </DropDownMenuItems>
                            </SfDropDownButton>
                        </div>
                    </Template>
                </ToolbarItem>
                <ToolbarItem PrefixIcon="em-icons e-shopping-cart" Align=ItemAlign.Right>
                </ToolbarItem>
            </ToolbarItems>
        </SfToolbar>
    </div>
</div>

<style>
    @@font-face {
        font-family: 'e-menu';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjvJSpgAAAEoAAAAVmNtYXBsm2feAAABpAAAAGxnbHlmmEcyrQAAAiQAAAWIaGVhZBJ0bwcAAADQAAAANmhoZWEHmQNyAAAArAAAACRobXR4I0AAAAAAAYAAAAAkbG9jYQaGB+4AAAIQAAAAFG1heHABGACaAAABCAAAACBuYW1lc0cOBgAAB6wAAAIlcG9zdJbKd4kAAAnUAAAAfQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAACQABAAAAAQAAhka7o18PPPUACwPoAAAAANe2FRwAAAAA17YVHAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAJAI4ABQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPrAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5anohgNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABYAAAADgAIAAIABuWp5bPluefo6CLohv//AADlqeWy5bnn6Ogi6IX//wAAAAAAAAAAAAAAAAABAA4ADgAQABAAEAAQAAAABQAGAAcACAABAAIAAwAEAAAAAACsASoBRAGwAhICUAKEAsQABAAAAAAD6gNZAD8AfwCDAI0AAAEzHw0dAQ8OLw8/DiMzHw0dAQ8OLw8/DgMhAyEBIRU3EyUVBQMjAwgJCAgIBwcHBgUFBAQDAgEBAgMEBAUFBgcHBwgICAkJCAgIBwcHBgUFBAQDAgEBAQECAwQEBQUGBwcHCAgI5AgJCAgHBwcGBQUEBAIDAQEDAgQEBQUGBwcHCAgJCAkICAgIBwYGBQUFAwMCAQEBAQIDAwUFBQYGBwgICAijAnyQ/qj+EgEKAssBcf5Yy9UBTwICAgQEBQYGBgcHCAgJCAkICQcIBwYGBgQFAwMCAQEBAQIDAwUEBgYGBwgHCQgJCAkICAcHBgYGBQQEAgICAgICBAQFBgYGBwcICAkICQgJBwgHBgYGBAUDAwIBAQEBAgMDBQQGBgYHCAcJCAkICQgIBwcGBgYFBAQCAgIBu/67AZUBAf5LAj0CAbUAAAAFAAAAAAPqA+oAAgAWABgAPABkAAA3OQEnMx8PFQc3MQE7AR8OAQcvDwEzHwoPBi8PPwP/nAgODg4NDAwLCwoICAcFBAMC6k4CdAgHEA4PDQ0MDAoJCAcGBAIB/kWFAQMEBgcJCgsLDQ0NDg4ODgLaBg0GBgYGBjwFBAMBAQECAgYJNAEDBAYHCQoKDAwNDQ4ODg40GQkKZJsBAwQFBwcJCQoMCw0NDg8OCE7pAnUDBQYHCQkLDAwNDg0ODg7+SIgODg4NDg0MDAsKCAgGBAMBArUCAgMDBQU9CQkJCQgICAcNDjQNDg4ODQ0MDAsJCQcGBAMBNA4DAgAAAAABAAAAAAPqA60ACgAAEyEVIRUhAxMhAyEVAcwBzPzEN5MDHrj84gOtXFz9/QGn/boAAAAABQAAAAADjgPqAAMABwALAA8AUwAAEyEVITUhFSE1IRUhJxEhESUhHw8RDw8hLw8RPw7qAij92AIo/dgCKP3YOwKi/XICeggICAgHBwYGBQUEAwMCAQEBAQIDAwQFBQYGBwcICAgI/YYICAgIBwcGBgUFBAMDAgEBAQECAwMEBQUGBgcHCAgIAQs+9j72Prj9XgKi9gEBAgMDBAUFBgYHBwgICAj8zggICAgHBwYGBQUEAwMCAQEBAQIDAwQFBQYGBwcICAgIAzIICAgIBwcGBgUFBAMDAgEABQAAAAADqQOpAAQACgAUAB4AOwAACQEXATUBFAcmNDIDBgcuATQ2MhYUAwYHLgE0NjIWFBc2NS4BIgYUFhcyNxcHJiMOARQWMjY3NCc3ATM1Ayb++FkBMv5fFRUq3xglJjExSzEZGCUmMTFLMUoOAmKUY2JLJyFmZiEnS2JilWICDmcBM4MDgP74WQE2K/50FQICKv6lGQICMkoyMkoB9xkCAjJKMjJKIyEnSmNjlGMCDmdnDgJjlGNjSichZ/7NKwAAAAMAAAAAA4oD5gAHABAAJwAAARUhNTMRIRElHgEGIiY0NjInBgcjIgYVERQWMyEyNjURNCYrAS4BIgEZAbZd/ZABWAwBGiYZGSZhIg+8JjU1JgJ2JjU1JrwPRFgDLn59/TICz1IMJxkZJxlAGSkzJv0pJzMzJwLXJjMpMwADAAAAAAOpA+cAAwAUAB4AAAERIREnBhURFBYXIT4BNRE0JiMhIicGFREzESE1IQYDTP4MQxs2JgH3JzU1J/4JJtgZXQIT/egmAs/9jwJxRBkm/YcmMwICMyYCeSYynxon/Y8CcV4CAAIAAAAAA+cD5wALACMAAAEOAQcuASc+ATceAQUeARcyNj8BARYyNjQnATc+ATUuAScOAQLYA7SHiLMEBLOIh7T9KwXnrkeBNAMBAQ4kHA7+/wMpLgTora7nAk6HtAMDtIeIswQEs4it6AQuKQP+/w4bJQ4BAQM0gUeu5wUF5wAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAHAAEAAQAAAAAAAgAHAAgAAQAAAAAAAwAHAA8AAQAAAAAABAAHABYAAQAAAAAABQALAB0AAQAAAAAABgAHACgAAQAAAAAACgAsAC8AAQAAAAAACwASAFsAAwABBAkAAAACAG0AAwABBAkAAQAOAG8AAwABBAkAAgAOAH0AAwABBAkAAwAOAIsAAwABBAkABAAOAJkAAwABBAkABQAWAKcAAwABBAkABgAOAL0AAwABBAkACgBYAMsAAwABBAkACwAkASMgZS1pY29uc1JlZ3VsYXJlLWljb25zZS1pY29uc1ZlcnNpb24gMS4wZS1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBpAGMAbwBuAHMAZQAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJAQIBAwEEAQUBBgEHAQgBCQEKAA1zaG9wcGluZy1jYXJ0B2VkaXQtMDUMZmlsZS1vcGVuLTAxDGZpbGUtdGV4dC0wMQNDdXQFUGFzdGUEQ29weQZTZWFyY2gAAAAAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .em-icons {
        font-family: 'e-menu';
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-transform: none;
        line-height: 1;
    }
    /* custom code start*/
    .toolbar-menu-control .e-menu-container.e-custom-menu {
        width: 452px;
    }

    .toolbar-menu-control {
        margin: 45px auto 0;
    }
        /* custom code end*/
        /* Search and Shopping cart icons */
        .toolbar-menu-control .e-search::before {
            content: '\e5b9';
        }

        .toolbar-menu-control .e-shopping-cart::before {
            content: '\e7e8';
        }

        /* Shopping cart icon size */
        .toolbar-menu-control .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-btn-icon.e-shopping-cart {
            font-size: 20px;
            margin: 4px 1px 0 0;
        }

    .mobile .toolbar-menu-control .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-btn-icon.e-shopping-cart {
        font-size: 30px;
        margin-top: 7px;
    }

    .mobile.material .toolbar-menu-control .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
        margin-top: 3.5px;
    }

    /* Overall UI customization */
    .toolbar-menu-control .e-menu-container {
        margin-right: 160px;
        border: none;
        vertical-align: middle;
    }

    .toolbar-menu-control .e-toolbar .e-toolbar-left .e-toolbar-item.e-template {
        padding: 0;
    }

    .material .toolbar-menu-control .e-toolbar .e-input-group .e-input {
        padding-bottom: 4px;
    }

    .material .toolbar-menu-control .e-toolbar .e-input-group .e-search {
        margin-bottom: 0;
    }

    .toolbar-menu-control .e-toolbar .e-hscroll-bar {
        overflow-y: hidden;
    }

    .toolbar-menu-control .e-toolbar .e-toolbar-items .e-toolbar-item #userDBtn {
        text-overflow: initial;
    }

    .fabric .toolbar-menu-control .e-toolbar-items .e-toolbar-left .e-menu-container,
    .fabric .toolbar-menu-control .e-toolbar-items .e-dropdown-btn {
        background-color: transparent;
    }

    .bootstrap4 .toolbar-menu-control .e-toolbar-items .e-dropdown-btn,
    .bootstrap4 .toolbar-menu-control .e-toolbar-items .e-dropdown-btn:hover,
    .bootstrap4 .toolbar-menu-control .e-toolbar-items .e-dropdown-btn:focus,
    .bootstrap4 .toolbar-menu-control .e-toolbar-items .e-dropdown-btn:active {
        background-color: transparent;
        border-color: transparent;
        color: #6c757d;
        box-shadow: none;
    }

    @@media only screen and (min-width: 1224px) {
        .toolbar-menu-control {
            width: 75%;
        }
    }

    @@media only screen and (min-width: 1824px) {
        .toolbar-menu-control {
            width: 65%;
        }
    }

    .e-dropdown-btn {
        margin-left: 11px;
    }

    .bootstrap4 .e-toolbar .e-menu-container ul {
        background-color: transparent;
    }
</style>
